<!--
  @author LiSong
  @date 2023-6-30
  @description 区县经办
-->
<template>
  <div>
    <div class="home-item-wrapper">
      <div class="home-item-panel">
        <HomeCard headName="项目申报" headIcon="project">
          <HomeTodoCard :cardItems="projApplyItems"/>
        </HomeCard>
      </div>
    </div>
    <div class="home-item-wrapper">
      <div class="home-item-panel">
        <HomeCard headName="项目上报" headIcon="proj-report">
          <HomeTodoCard :cardItems="projReportItems"/>
        </HomeCard>
      </div>
    </div>
    <div class="home-item-wrapper">
      <div class="home-item-panel">
        <HomeAuditLogs />
      </div>
    </div>
  </div>
</template>

<script setup>
import HomeUtils from '../config/home-utils'
import HomeCard from '../items/HomeCard.vue'
import HomeTodoCard from '../items/HomeTodoCard.vue'
import HomeAuditLogs from '../items/HomeAuditLogs.vue'

const props = defineProps({
  loading: { type: Boolean, default: false },
  todoData: { type: [ Object, Array ] }
})

// 项目申报
let projApplyItems = ref([])
// 项目上报
let projReportItems = ref([])

watch(
  () => props.todoData,
  (newValue, oldValue) => {
    const { applyItems, reportItems } = HomeUtils.tranfHandleData(newValue)
    projApplyItems.value = applyItems
    projReportItems.value = reportItems
  },
  {deep: false, immediate: false}
)

</script>

<style lang="scss" scoped>
.home-item-wrapper {
  display: flex;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 15px;
}
.home-item-panel {
  flex: 1;
  padding: 0 8px;
}
</style>